"use strict";
// 初始化商品数据
const data = [
    {
        id: 1,
        name: "笔记本",
        unitPrice: 20,
        quantity: 0,
        subtotal: 0,
        isChecked: false,
    },
    {
        id: 2,
        name: "电视",
        unitPrice: 10,
        quantity: 0,
        subtotal: 0,
        isChecked: false,
    },
    {
        id: 3,
        name: "智能电冰箱",
        unitPrice: 30,
        quantity: 0,
        subtotal: 0,
        isChecked: false,
    },
];
// 定义是否全选的状态
const isArrCheckbox = false;
// 渲染表格
function render() {
    let html = "";
    for (let i = 0; i < data.length; i++) {
        html += `
        <tr class='itr' onmouseover='sbHover(${i})' onmouseout='sbOut(${i})'>
          <td><input type="checkbox" onchange='check(${i})' ${data[i].isChecked ? "checked" : ""} class='check'></td>
          <td>${data[i].id}</td>
          <td>${data[i].name}</td>
          <td>${data[i].unitPrice.toFixed(2)}</td>
          <td class="quantity">
            <button onclick='add(${i})'>-</button>
            <input type="text" class='shuNum' onchange='num(${i})' value="${data[i].quantity}">
            <button onclick='add(${i})'>+</button>
          </td>
          <td>${data[i].subtotal.toFixed(2)}</td>
          <td><button onclick='dele(${i})'>删除</button></td>
        </tr>
      `;
    }
    document.querySelector("tbody").innerHTML = html;
    document.querySelector("#changeAll").checked = isArrCheckbox;
}
// 渲染初始表格
render();
// 全选反选事件处理
document.querySelector("#changeAll").addEventListener("change", function () {
    isArrCheckbox = !isArrCheckbox;
    for (let i = 0; i < data.length; i++) {
        data[i].isChecked = isArrCheckbox;
    }
    render();
});
// 单选事件处理
function check(id) {
    data[id].isChecked = !data[id].isChecked;
    let isArr = true;
    for (let i = 0; i < data.length; i++) {
        if (!data[i].isChecked) {
            isArr = false;
            break;
        }
    }
    isArrCheckbox = isArr;
    render();
}
// 加号事件处理
function add(id) {
    if (data[id].quantity < 10000) {
        // 假设数量有上限
        data[id].quantity++;
        data[id].subtotal = data[id].quantity * data[id].unitPrice;
        addNum();
    }
    render();
}
// 减号事件处理
function jian(id) {
    if (data[id].quantity > 0) {
        data[id].quantity--;
        data[id].subtotal = data[id].quantity * data[id].unitPrice;
        addNum();
    }
    render();
}
// 删除事件处理
function dele(id) {
    data.splice(id, 1);
    addNum();
    render();
}
// 输入框控制数量功能
function num(id) {
    const inputElement = document.querySelector(`.shuNum:nth-of-type(${id + 1})`);
    if (inputElement) {
        const quantity = parseInt(inputElement.value, 10);
        if (quantity >= 0) {
            data[id].quantity = quantity;
            data[id].subtotal = data[id].quantity * data[id].unitPrice;
            addNum();
        }
    }
    render();
}
// 计算总价
function addNum() {
    let price = 0;
    for (let i = 0; i < data.length; i++) {
        price += data[i].subtotal;
    }
    document.querySelector("#price").textContent = "￥" + price.toFixed(2);
}
// 鼠标悬停事件处理
function sbHover(id) {
    const trs = document.querySelectorAll(".itr")[id];
    if (trs) {
        trs.className = "itr color";
    }
}
// 鼠标移出事件处理
function sbOut(id) {
    const trs = document.querySelectorAll(".itr")[id];
    if (trs) {
        trs.className = "itr";
    }
}
